$.fn.getDatagridConfig = function(listTable){
    var datagridConfigList = [];
    $.each(listTable, function(index, tableParam){
        console.log("table param:", tableParam);
        var datagridCode = tableParam.datagrid_code;
        var subjectKeyword = tableParam.subject_keyword;
        var configureData = getDatagridConfigureData(datagridCode);
        var tableObject = $('#table_' + subjectKeyword);
        var columnListFix = [];
        var columnListNotFix = [];
        var toolbarList = [];

        var subjectText = configureData.datagrid_info.datagrid_name;

        columnListFix.push({field:'ck',title:'ck',checkbox:true});
        $.each(configureData.datagrid_column_list_fix, function(index, item){
            if('status' == item.column_name){
                var tempConfig = {field:'status',title:'状态',width:50, align: 'center', formatter: function (value, row, index) {
                        if (1 == value) {
                            return '<span class="cell-status cell-yes"></span>';
                        } else if (2 == value) {
                            return '<span class="cell-status cell-no"></span>';
                        }
                    }};
                columnListFix.push(tempConfig);
            }else if('radio' == item.element_type && 2 == item.is_hide){
                var tempConfig = {field:item.column_name,title:item.column_title,width:50, align: 'center', formatter: function (value, row, index) {
                        if (1 == value) {
                            return '<span class="cell-status cell-yes"></span>';
                        } else if (0 == value) {
                            return '<span class="cell-status cell-no"></span>';
                        }
                    }};
                columnListFix.push(tempConfig);
            }else{
                columnListFix.push({field:item.column_name,title:item.column_title,width:item.column_width,hidden:1 == item.is_hide ? true:false});
            }
        });
        $.each(configureData.datagrid_column_list, function(index, item){
            if('status' == item.column_name){
                var tempConfig = {field:'status',title:'状态',width:50, align: 'center', formatter: function (value, row, index) {
                        if (1 == value) {
                            return '<span class="cell-status cell-yes"></span>';
                        } else if (2 == value) {
                            return '<span class="cell-status cell-no"></span>';
                        }
                    }};
                columnListNotFix.push(tempConfig);
            }else{
                columnListNotFix.push({field:item.column_name,title:item.column_title,width:item.column_width,hidden:1 == item.is_hide ? true:false});
            }
        });
        $.each(configureData.datagrid_toolbar_list, function(index, toolBtnItem){
            var handlerFunc = function(){
                tableObject.datagrid('reload');
            };
            var formParamData = {};

            if(1 == toolBtnItem.is_open_dialog){
                var functionKeyword = toolBtnItem.button_type + '_' + subjectKeyword;
                var dialogId = 'dialog_' + functionKeyword;
                var toolbarBtnId = 'btn_' + functionKeyword;
                var formId = 'form_' + functionKeyword;
                var dialogWidth = dialogDefaultWidth;
                if(tableParam.hasOwnProperty("two_column_width") && -1 !== tableParam.two_column_width.indexOf(toolBtnItem.button_type)){
                    dialogWidth = dialogTwoColumnWidth;
                }
                if(tableParam.hasOwnProperty("three_column_width") && -1 !== tableParam.three_column_width.indexOf(toolBtnItem.button_type)){
                    dialogWidth = dialogThreeColumnWidth;
                }
                var dialogConfig = {
                    href: toolBtnItem.request_page_path,
                    title:toolBtnItem.button_text + subjectText,
                    queryParams:{},
                    width:dialogWidth,
                    height:dialogDefaultHeight,
                    modal:true,
                    buttons:[{
                            text:'<i class="fa fa-check fa-btn-cls" style="color:green"></i>保存',
                            plain:true,
                            handler:function(){
                                console.log("form id:", formId);
                                formParamData = $("#" + formId).serializeObject();
                                if(toolBtnItem.is_need_check > 0){
                                    var checkList = tableObject.datagrid('getChecked');
                                    var tempArrId = [];
                                    $.each(checkList, function(index, item){
                                        tempArrId.push(item.id);
                                    });
                                    if(1 == toolBtnItem.is_need_check){
                                        formParamData = $.extend({id:tempArrId[0]}, formParamData);
                                    }else{
                                        formParamData = $.extend({arr_id:tempArrId}, formParamData);
                                    }
                                }
                                console.log("form data:", formParamData);
                                console.log(formParamData);

                                var loading = layer.load(1, {
                                    shade: [0.1,'#fff'] //0.1透明度的白色背景
                                });
                                $.ajax({
                                    url: toolBtnItem.request_api_path,
                                    async: false,
                                    dataType:'json',
                                    type:'post',
                                    data:formParamData,
                                    success:function(resp){
                                        layer.close(loading);
                                        if( 1 == resp.code ){
                                            $("#" + dialogId).dialog('close');
                                            tableObject.datagrid('reload');
                                        }else{
                                            layer.msg(resp.message);
                                        }
                                    }
                                });
                            }
                        },{
                            text:'<i class="fa fa-times fa-btn-cls" style="color:red"></i>取消',
                            plain:true,
                            handler:function(){
                                $("#" + dialogId).dialog('close');
                            }
                        }]
                };
                handlerFunc = function(){
                    if(toolBtnItem.is_need_check > 0){
                        var checkList = tableObject.datagrid('getChecked');
                        if(checkList.length < 1){
                            layer.msg('请选择要' + toolBtnItem.button_text + '的数据');
                            return false;
                        }

                        if(1 == toolBtnItem.is_need_check){
                            if(checkList.length > 1){
                                layer.msg('当前' + toolBtnItem.button_text + '不支持批量操作');
                                return false;
                            }
                            dialogConfig.queryParams = {id:checkList[0].id};
                        }else if(2 == toolBtnItem.is_need_check){
                            var arrId = [];
                            $.each(checkList, function(index, item){
                                arrId.push(item.id);
                            })
                            dialogConfig.queryParams = {arr_id:arrId};
                        }
                    }
                    $("#" + dialogId).dialog(dialogConfig);
                };
            }else{
                if('refresh' !== toolBtnItem.button_type){
                    handlerFunc = function(){
                        //不是弹框形式，则必须勾选列表数据
                        var checkList = tableObject.datagrid('getChecked');
                        if(checkList.length < 1){
                            layer.msg('请选择要' + toolBtnItem.button_text + '的数据');
                            return false;
                        }

                        var tempArrId = [];
                        $.each(checkList, function(index, item){
                            tempArrId.push(item.id);
                        });
                        if(1 == toolBtnItem.is_need_check){
                            formParamData = $.extend({id:tempArrId[0]}, formParamData);
                        }else{
                            formParamData = $.extend({arr_id:tempArrId}, formParamData);
                        }

                        if(1 == toolBtnItem.is_confirm){
                            var confirm = layer.confirm('你确定要' + toolBtnItem.button_text + '?',{title:'执行操作',btn:['是','否']},function(){
                                $.ajax({
                                    url: toolBtnItem.request_api_path,
                                    type:'post',
                                    data: formParamData,
                                    dataType:'json',
                                    success:function(resp){
                                        layer.close(confirm);
                                        if(resp.code){
                                            tableObject.datagrid('reload');
                                        }else{
                                            layer.msg(resp.message);
                                        }
                                    }
                                });
                            });
                        }else{
                            $.ajax({
                                url: toolBtnItem.request_api_path,
                                type:'post',
                                data: formParamData,
                                dataType:'json',
                                success:function(resp){
                                    if(resp.code){
                                        tableObject.datagrid('reload');
                                    }else{
                                        layer.msg(resp.message);
                                    }
                                }
                            });
                        }
                    };
                }
            }
            var buttonConfig = {
                text:'<span class="' + toolBtnItem.button_class + '"><i class="' + toolBtnItem.button_icon + '" ></i>' + toolBtnItem.button_text + '</span> ',
                id:toolbarBtnId,
                plain:true,
                handler: function(){
                    return handlerFunc();
                }
            };
            toolbarList.push(buttonConfig);
        });

        var isFitColumn = true;
        if(configureData.datagrid_column_list_fix.length > 0){
            isFitColumn = false;
        }

        var configDatagrid = {
            url: configureData.datagrid_refresh_path,
            method: 'post',
            remoteSort:false,
            pageList:[20,50,100],
            pageSize:20,
            pagination:true,
            clickToEdit:false,
            dblclickToEdit:false,
            checkOnSelect:true,
            singleSelect:false,
            rownumbers:false,
            striped:true,
            fitColumns:isFitColumn,
            fit:isFitColumn,
            frozenColumns:[columnListFix],
            columns:[columnListNotFix],
            loadFilter: function(data){
                return loadFilter(data, true);
            },
            onCheck: function(index, row){
            },
            onUncheck:function(index, row){
            },
            onLoadSuccess: function(){
                $(".datagrid-header-check").html("");
            },
            toolbar: toolbarList
        };
        datagridConfigList.push(configDatagrid);
    });
    return datagridConfigList;
};

$.fn.getRelatedDatagridConfig = function(listTable, foreignId){
    var configDatagridList = [];
    var tableObjectList = [];
    $.each(listTable, function(outerIndex, tableParam){
        var datagridCode = tableParam.datagrid_code;
        var subjectKeyword = tableParam.subject_keyword;
        var configureData = getDatagridConfigureData(datagridCode);
        var tableObject = $('#table_' + subjectKeyword);
        var columnList = [];
        var toolbarList = [];
        var subjectText = configureData.datagrid_info.datagrid_name;

        $.each(configureData.datagrid_column_list, function(index, item){
            if('status' == item.column_name && 2 == item.is_hide){
                var tempConfig = {field:'status',title:'状态',width:50, align: 'center', formatter: function (value, row, index) {
                        if (1 == value) {
                            return '<span class="cell-status cell-yes"></span>';
                        } else if (2 == value) {
                            return '<span class="cell-status cell-no"></span>';
                        }
                    }};
                columnList.push(tempConfig);
            }else if('radio' == item.element_type && 2 == item.is_hide){
                var tempConfig = {field:item.column_name,title:item.column_title,width:50, align: 'center', formatter: function (value, row, index) {
                        if (1 == value) {
                            return '<span class="cell-status cell-yes"></span>';
                        } else if (0 == value) {
                            return '<span class="cell-status cell-no"></span>';
                        }
                    }};
                columnList.push(tempConfig);
            }else{
                columnList.push({field:item.column_name,title:item.column_title,width:item.column_width,hidden:1 == item.is_hide ? true:false});
            }
        });

        $.each(configureData.datagrid_toolbar_list, function(index, toolBtnItem){
            var handlerFunc = function(){
                tableObject.datagrid('reload');
            };
            var formParamData = {};

            if(1 == toolBtnItem.is_open_dialog){
                var functionKeyword = toolBtnItem.button_type + '_' + subjectKeyword;
                var dialogId = 'dialog_' + functionKeyword;
                var toolbarBtnId = 'btn_' + functionKeyword;
                var formId = 'form_' + functionKeyword;
                var dialogConfig = {
                    href: toolBtnItem.request_page_path,
                    title:toolBtnItem.button_text + subjectText,
                    queryParams:{},
                    width:dialogDefaultWidth,
                    height:dialogDefaultHeight,
                    modal:true,
                    buttons:[{
                        text:'<i class="fa fa-check fa-btn-cls" style="color:green"></i>保存',
                        plain:true,
                        handler:function(){
                            console.log("form id:", formId);
                            formParamData = $("#" + formId).serializeObject();

                            if(outerIndex > 0){
                                //第二张表增加数据要带上第一张表的关联id
                                var leftCheckList = tableObjectList[0].datagrid('getChecked');
                                if(0 == leftCheckList.length){
                                    lay.msg("请指定左边关联的数据");
                                    return;
                                }
                                formParamData = $.extend({[foreignId[outerIndex]]:leftCheckList[0].id}, formParamData);
                            }

                            if(toolBtnItem.is_need_check > 0){
                                var checkList = tableObject.datagrid('getChecked');
                                var tempArrId = [];
                                $.each(checkList, function(index, item){
                                    tempArrId.push(item.id);
                                });
                                if(1 == toolBtnItem.is_need_check){
                                    formParamData = $.extend({id:tempArrId[0]}, formParamData);
                                }else{
                                    formParamData = $.extend({arr_id:tempArrId}, formParamData);
                                }
                            }
                            console.log("form data:", formParamData);
                            console.log(formParamData);

                            var loading = layer.load(1, {
                                shade: [0.1,'#fff'] //0.1透明度的白色背景
                            });
                            $.ajax({
                                url: toolBtnItem.request_api_path,
                                async: false,
                                dataType:'json',
                                type:'post',
                                data:formParamData,
                                success:function(resp){
                                    layer.close(loading);
                                    if( 1 == resp.code ){
                                        $("#" + dialogId).dialog('close');
                                        tableObject.datagrid('reload');
                                    }else{
                                        layer.msg(resp.message);
                                    }
                                }
                            });
                        }
                    },{
                        text:'<i class="fa fa-times fa-btn-cls" style="color:red"></i>取消',
                        plain:true,
                        handler:function(){
                            $("#" + dialogId).dialog('close');
                        }
                    }]
                };
                handlerFunc = function(){
                    if(toolBtnItem.is_need_check > 0){
                        var checkList = tableObject.datagrid('getChecked');
                        if(checkList.length < 1){
                            layer.msg('请选择要' + toolBtnItem.button_text + '的数据');
                            return false;
                        }

                        if(1 == toolBtnItem.is_need_check){
                            if(checkList.length > 1){
                                layer.msg('当前' + toolBtnItem.button_text + '不支持批量操作');
                                return false;
                            }
                            dialogConfig.queryParams = {id:checkList[outerIndex].id};
                        }else if(2 == toolBtnItem.is_need_check){
                            var arrId = [];
                            $.each(checkList, function(index, item){
                                arrId.push(item.id);
                            })
                            dialogConfig.queryParams = {arr_id:arrId};
                        }
                    }
                    $("#" + dialogId).dialog(dialogConfig);
                };
            }else{
                if('refresh' !== toolBtnItem.button_type){
                    handlerFunc = function(){
                        //不是弹框形式，则必须勾选列表数据
                        var checkList = tableObject.datagrid('getChecked');
                        if(checkList.length < 1){
                            layer.msg('请选择要' + toolBtnItem.button_text + '的数据');
                            return false;
                        }

                        var tempArrId = [];
                        $.each(checkList, function(index, item){
                            tempArrId.push(item.id);
                        });
                        if(1 == toolBtnItem.is_need_check){
                            formParamData = $.extend({id:tempArrId[0]}, formParamData);
                        }else if(2 == toolBtnItem.is_need_check){
                            formParamData = $.extend({arr_id:tempArrId}, formParamData);
                        }

                        if(1 == toolBtnItem.is_confirm){
                            var confirm = layer.confirm('你确定要' + toolBtnItem.button_text + '?',{title:'执行操作',btn:['是','否']},function(){
                                $.ajax({
                                    url: toolBtnItem.request_api_path,
                                    type:'post',
                                    data: formParamData,
                                    dataType:'json',
                                    success:function(resp){
                                        layer.close(confirm);
                                        if(resp.code){
                                            tableObject.datagrid('reload');
                                        }else{
                                            layer.msg(resp.message);
                                        }
                                    }
                                });
                            });
                        }else{
                            $.ajax({
                                url: toolBtnItem.request_api_path,
                                type:'post',
                                data: formParamData,
                                dataType:'json',
                                success:function(resp){
                                    if(resp.code){
                                        tableObject.datagrid('reload');
                                    }else{
                                        layer.msg(resp.message);
                                    }
                                }
                            });
                        }
                    };
                }else{
                    handlerFunc = function(){
                        tableObject.datagrid('reload');
                    };
                }
            }
            var buttonConfig = {
                text:'<span class="' + toolBtnItem.button_class + '"><i class="' + toolBtnItem.button_icon + '" ></i>' + toolBtnItem.button_text + '</span> ',
                id:toolbarBtnId,
                plain:true,
                handler: function(){
                    return handlerFunc();
                }
            };
            toolbarList.push(buttonConfig);
        });

        var configDatagrid = {
            url: configureData.datagrid_refresh_path,
            method: 'post',
            queryParams:{},
            remoteSort:false,
            pageList:[20,50,100],
            pageSize:20,
            pagination:true,
            clickToEdit:false,
            dblclickToEdit:false,
            checkOnSelect:true,
            singleSelect:true,
            rownumbers:false,
            striped:true,
            fitColumns:true,
            fit:true,
            frozenColumns:[[
                {field:'ck',title:'ck',checkbox:true},
            ]],
            columns:[columnList],
            loadFilter: function(data){
                return loadFilter(data, true);
            },
            toolbar: toolbarList
        };
        configDatagridList.push(configDatagrid);
        tableObjectList.push(tableObject);
    });

    console.log("configlist:", configDatagridList);
    $.each(configDatagridList, function(configIndex, configItem){
        var nextConfigIndex = configIndex+1;
        var foreignField = foreignId[configIndex];
        if(nextConfigIndex < configDatagridList.length){
            configDatagridList[configIndex].onClickRow = function(index, row){
                console.log("select main:", row.id);
                configDatagridList[nextConfigIndex].queryParams = {[foreignField]:row.id};
                tableObjectList[nextConfigIndex].datagrid(configDatagridList[nextConfigIndex]);
            };

            configDatagridList[configIndex].onSelect = function(index, row){
                configDatagridList[nextConfigIndex].queryParams = {[foreignField]:row.id};
                tableObjectList[nextConfigIndex].datagrid(configDatagridList[nextConfigIndex]);
            };

            configDatagridList[configIndex].onLoadSuccess = function(){
                tableObjectList[configIndex].datagrid('selectRow', 0);
            };
        }
    });

    return configDatagridList;
};

$.fn.autoProduceFormHtml = function(datagridCode, formType){
    var arrEasyuiClass = {
        date:"easyui-datebox",
        datetime: "easyui-datetimebox",
        time: "easyui-timespinner",
        integer: "easyui-numberbox",
        decimal: "easyui-numberbox",
    };

    if('add' == formType){
        var columnList = getAddFormColumnList(datagridCode);
    }else{
        var columnList = getEditFormColumnList(datagridCode);
    }
    console.log("column list:", columnList);

    var formHtml = '';
    $.each(columnList, function(index, item){
        var requireHtml = '';
        var classNameHtml = 'input-txt';
        if(1 == item.is_require){
            requireHtml = '<em>*</em>';
        }

        formHtml += '<dl class="row">';
        formHtml += '<dt class="tit"><label>' + requireHtml + item.column_title + '</label></dt>';
        if('select' == item.element_type){
            var subOptionList = getDictionarySubOption(item.dictionary_id);
            formHtml += '<dd class="opt"><select name="' + item.column_name + '"  class="' + classNameHtml + '"  ></';
            formHtml += '<option value="">请选择</option>';
            $.each(subOptionList, function(subIndex, subOptionItem){
                formHtml += '<option value="' + subOptionItem.sub_value + '">' + subOptionItem.sub_name + '</option>';
            });
            formHtml += '</select></dd>';
        }else if('radio' == item.element_type){
            formHtml += '<dd class="opt">';
            formHtml += '<label><input type="radio" value="1" checked="checked" name="' + item.column_name + '">是</label>';
            formHtml += '<label><input type="radio" value="0" name="' + item.column_name + '">否</label>';
            formHtml += '</dd>';
        }else{
            if(arrEasyuiClass.hasOwnProperty(item.element_type)){
                classNameHtml += " " + arrEasyuiClass[item.element_type];
            }

            if("decimal" == item.element_type){
                formHtml += '<dd class="opt"><input name="' + item.column_name + '"  class="' + classNameHtml + '"  data-options="precision:2,width:\'' + '100%' + '\'"  /></dd>';
            }else{
                formHtml += '<dd class="opt"><input name="' + item.column_name + '"  class="' + classNameHtml + '"  data-options="width:\'' + '100%' + '\'"  /></dd>';
            }
        }
        formHtml += '</dl>';
    });
    return formHtml;
}

$.fn.refreshAfterSearchTable = function(filterZoneConfig){
    console.log("enter refresh");
    var subjectKeyword = filterZoneConfig.subjectKeyword;
    var functionName = 'filter_' + subjectKeyword;
    var searchBtnId = '#btn_search_in_filter_' + subjectKeyword;
    var resetBtnId = '#btn_reset_in_filter_' + subjectKeyword;

    $.each(filterZoneConfig.searchFieldSelect, function (i, field) {
        if (commonSelectOption.hasOwnProperty(field)) {
            $("#ele_select_" + field + "_in_" + functionName).combobox(commonSelectOption[field]);
        }
    });

    bindAllFilterInputEvent(filterZoneConfig);
    bindSearchBtnEvent(searchBtnId, filterZoneConfig);
    bindResetBtnEvent(resetBtnId, filterZoneConfig);
};

function bindSearchBtnEvent(selector, filterZoneConfig)
{
    $(selector).click(function(){
        refreshTableList(filterZoneConfig);
    });
}

function bindResetBtnEvent(selector, filterZoneConfig){
    var functionName = 'filter_' + filterZoneConfig.subjectKeyword;
    $(selector).click(function () {
        var filterConfig = {};
        $.each(filterZoneConfig.searchFieldSelect, function (index, fieldName) {
            var id = "#ele_select_" + fieldName + "_in_" + functionName;
            $(id).combobox('setValue', '');
            filterConfig[fieldName] = '';
        });
        $.each(filterZoneConfig.searchFieldInput, function (index, fieldName) {
            var id = "#ele_input_" + fieldName + "_in_" + functionName;
            $(id).textbox('setValue', '');
            filterConfig[fieldName] = '';
        });
        filterZoneConfig.configDatagrid.queryParams = filterConfig;
        filterZoneConfig.tableObject.datagrid(filterZoneConfig.configDatagrid);
    });
}

function bindAllFilterInputEvent(filterZoneConfig){
    $(".wrapper-bz-filter input").keyup(function (e) {
        if (13 == e.keyCode) {
            refreshTableList(filterZoneConfig);
        }
    });
}



function refreshTableList(filterZoneConfig) {
    var functionName = 'filter_' + filterZoneConfig.subjectKeyword;
    var filterConfig = {};
    $.each(filterZoneConfig.searchFieldSelect, function (index, fieldName) {
        var id = "#ele_select_" + fieldName + "_in_" + functionName;
        filterConfig[fieldName] = $(id).combobox('getValue');
        // $.extend(filterConfig, {fieldName: $(id).combobox('getValue')})
    });
    $.each(filterZoneConfig.searchFieldInput, function (index, fieldName) {
        var id = "#ele_input_" + fieldName + "_in_" + functionName;
        filterConfig[fieldName] = $(id).textbox('getValue');
        // $.extend(filterConfig, {fieldName: $(id).textbox('getValue')})
    });
    filterZoneConfig.configDatagrid.queryParams = filterConfig;
    console.log("fiter config:", filterConfig);
    filterZoneConfig.tableObject.datagrid(filterZoneConfig.configDatagrid);
}

function getDatagridConfigureData(datagridCode)
{
    var configureData = {};
    $.ajax({
        url:'/api/DatagridCustom/getConfigureData',
        type:'post',
        data: {"datagrid_code": datagridCode},
        dataType:'json',
        async:false,
        success:function(resp){
            if(1 == resp.code){
                configureData = resp.data;
            }
        }
    });
    return configureData;
}

function getPageColumnList(datagridCode)
{
    var columnList = [];
    $.ajax({
        url:'/api/PageColumn/getPageColumnOption',
        type:'post',
        data: {"datagrid_code": datagridCode},
        dataType:'json',
        async:false,
        success:function(resp){
            if(1 == resp.code){
                columnList = resp.data;
            }
        }
    });
    return columnList;
}

function getAddFormColumnList(datagridCode)
{
    var columnList = [];
    $.ajax({
        url:'/api/DatagridColumn/getDatagridColumnOption',
        type:'post',
        data: {"datagrid_code": datagridCode, "is_in_add":1},
        dataType:'json',
        async:false,
        success:function(resp){
            if(1 == resp.code){
                columnList = resp.data;
            }
        }
    });
    return columnList;
}

function getEditFormColumnList(datagridCode)
{
    var columnList = [];
    $.ajax({
        url:'/api/DatagridColumn/getDatagridColumnOption',
        type:'post',
        data: {"datagrid_code": datagridCode, "is_in_edit":1},
        dataType:'json',
        async:false,
        success:function(resp){
            if(1 == resp.code){
                columnList = resp.data;
            }
        }
    });
    return columnList;
}

function getDictionarySubOption(dictionaryId)
{
    var subList = [];
    $.ajax({
        url:'/api/DictionarySub/getDictionarySubOption',
        type:'post',
        data: {"dictionary_id": dictionaryId},
        dataType:'json',
        async:false,
        success:function(resp){
            if(1 == resp.code){
                subList = resp.data;
            }
        }
    });
    return subList;
}

/**
 * 渲染多层带标题的taglist
 */
function renderMultipleFloorTagList(wrapperId, treeData, trunkTitleField, branchTitleField)
{
    var wrapperObject = $("#" + wrapperId);
    var html = '<div class="box-group-tag-list">';
    $.each(treeData, function(index, trunkItem){
        html += '<div data-id="' + trunkItem.trunk_info.id + '" class="box-group-tag-item">';
        html += '<div class="btn-delete-group-tag-item"><i class="fa fa-trash"></i></div>';
        html += '<div class="title">' + trunkItem.trunk_info[trunkTitleField] + '</div>';
        html += '<div class="box-tag-list">';
        $.each(trunkItem.branch_list, function(index, branchItem){
            html += '<div data-id="' + branchItem.id + '" class="tag-item">' + branchItem[branchTitleField] + '<i class="fa fa-trash"></i></div>'
        });
        html += '<div class="btn-add-tag-item tag-item"><i class="fa fa-plus"></i></div>';
        html += '</div>';
        html += '</div>';

    });
    html += '<div>';
    wrapperObject.html(html);
}
